$(document).ready(function () {

    //初始化主屏图标列表
    initialization();
    function initialization() {
        $('.shortcutList .list').empty();
        for (let i = 0; i < webTags.length; i++) {
            let a = document.createElement('a');
            a.setAttribute('href', webTags[i].webAddress);
            let tagImg = document.createElement('div');
            let tagTitle = document.createElement('div');
            tagImg.className = 'tagImg';
            tagTitle.className = 'tagTitle';
            tagImg.style.backgroundImage = "url(" + webTags[i].webImages + ")";
            if (tagImg.style.background == null) {
                tagImg.innerHTML = webTags[i].Text;
            }
            tagTitle.innerHTML = webTags[i].webName;
            a.appendChild(tagImg);
            a.appendChild(tagTitle);
            $('.shortcutList .list').append(a);
        }
        console.log(webTags);
    }

    //尝试动态加载推荐的网站
    recommendWeb();
    function recommendWeb() {

        // for (let i = 0; i < webRecommend.length; i++) {
        //     let body = document.querySelector('body');
        //     let boxone = document.createElement('div');
        //     boxone.className = 'boxone';
        //     let img = document.createElement('img');
        //     img.setAttribute('src', webRecommend[i].webAddress);
        //     let xtb = document.createElement('div');
        //     xtb.className = 'xtb';
        //     xtb.appendChild(img);
        //     let Oh = document.createElement('h4');
        //     Oh.innerHTML = webRecommend[i].webName;
        //     boxone.appendChild(xtb);
        //     boxone.appendChild(Oh);
        //     body.appendChild(boxone);
        // }
        // console.log(webRecommend);

        for (let i = 0; i < webRecommend.length; i++) {
            let warBox = document.createElement('div');
            warBox.className = "tm";
            warBox.innerHTML = `
                    <div class="xtb">
                        <img src="${webRecommend[i].webImages}" alt="">
                    </div>
                    <div class="right">
                        <h4${webRecommend[i].webName}</h4>
                        <p>${webRecommend[i].webMessage}</p>
                        <div class="open">打开</div>
                        <div class="add">添加</div>
                    </div>
            `;
            $('.df-inner .box').append(warBox);
        }
        
    }



    // 功能区设置模块
    setUp();
    function setUp() {
        let n;
        $('.setUp').css("height", $('.function').height() - 65);

        //鼠标拖拽
        $('.boll').mousedown(function () {
            let index = $(this).parent().parent(".ds").index() / 2 - 2;
            function moveBoll(e) {
                let left = e.clientX - $('.boll').eq(index).parent('.drag').offset().left;
                if (left < 0) {
                    left = 0;
                } else if (left > 185) {
                    left = 185;
                }
                n = parseInt((left / 185) * 100);
                $('.boll').eq(index).css('left', left + "px");
                $('.boll').eq(index).siblings('.select').css("width", (left + 7) + "px");
                $('.boll').eq(index).parent('.drag').siblings('div').html(n + "%");
                changeValue(n, index);
            }
            $(document).on('mousemove', moveBoll);
            $(document).mouseup(function () {
                $(document).off('mousemove', moveBoll);
            })

        })

        //布局点击切换
        $('.layout li').on('click', function () {
            $(this).children('img').css('outline', "solid 2px #00CA67").end().siblings().children('img').css("outline", "none");
            if ($(this).index() == 0) {
                $('.shortcutList .list a').css('width', "20%");
                $('.shortcutList .list').css('min-width', "500px");
            } else if ($(this).index() == 1) {
                $('.shortcutList .list a').css('width', 100 / 6 + "%");
                $('.shortcutList .list').css('min-width', "606px");
            } else if ($(this).index() == 2) {
                $('.shortcutList .list a').css('width', 100 / 7 + "%");
                $('.shortcutList .list').css('min-width', "707px");
            }
        });

        //拖拽修改布局样式
        function changeValue(n, index) {
            console.log(n, index);
            if (index == 0) {
                if (n > 50) {
                    $('.shortcutList').css("margin-left", (50 - n) * 2 + "px");
                }
                $('.shortcutList .list').css("width", 100 + (n / 2 - 25) + "%");
            } else if (index == 1) {
                $('.shortcutList .list a').css("margin-bottom", (n / 2) + "px");
            } else if (index == 2) {
                $('#wrap #main .shortcutList .listBox .list a .tagImg').css("border-radius", (n / 2) + "%");
            } else if (index == 3) {
                n = n * 0.02;
                if (n < 0.4) {
                    n = 0.4;
                } else if (n > 1.3) {
                    n = 1.3;
                }
                $('.shortcutList .list a').css("transform", "scale(" + n + ")");
            } else if (index == 4) {
                $('.shortcutList .list a').css("opacity", n / 100 + 0.1);
            }
        }

        //点击切换添加页面和设置页面
        $('.options>div').on('click', function () {
            let index = $(this).index();
            if (index == 0) {
                $('.add').css("display", "block").siblings('.setUp').css("display", "none")
                $(this).css("color", "#00CA67").siblings('#setting').css("color", "#000");
            } else if (index == 1) {
                $('.setUp').css("display", "block").siblings('.add').css("display", "none");
                $(this).css("color", "#00CA67").siblings('#add-wrap').css("color", "#000");
            } else if (index == 2) {
                //隐藏功能区
                if ($('.function').css("width") == "420px") {
                    $('.function').animate({
                        "width": "0px"
                    }, 200);



                } else if ($('.function').css("width") == "0px") {
                    $('.function').animate({
                        "width": "420px"
                    }, 200);
                    $('#default').css('display', 'block');
                }
            }
        })
        // 点击切换 默认页面和自定义页面
        $('.titles>h3').on('click', function () {
            let index = $(this).index();
            if (index == 0) {
                $(this).removeClass('active').siblings().addClass('active');
                $('#default').css('display', 'block').siblings().css("display", "none");
            } else if (index == 1) {
                $(this).removeClass('active').siblings().addClass('active');
                $('#customize').css('display', 'block').siblings().css("display", "none");
            }
        });
        //默认页面的功能
        //点击添加 在主页面面添加上点击的图标
        $('#default .df-inner .box .jd .right .add').on('click', function () {
            webTags.push(webRecommend[1]);
            initialization();

        })
        $('#default .df-inner .box .tm .right .add').on('click', function () {
            webTags.push(webRecommend[0]);
            initialization();

        })
        $('#default .df-inner .box .zh .right .add').on('click', function () {
            webTags.push(webRecommend[2]);
            initialization();

        })
        //打开按钮功能
        $('#default .df-inner .box .zh .right .open').on('click', function () {
            window.location.href = 'https://www.zhihu.com/signin?next=%2F'
        })
        $('#default .df-inner .box .jd .right .open').on('click', function () {
            window.location.href = 'https://www.jd.com/?cu=true&utm_source=www.infinitynewtab.com&utm_medium=tuiguang&utm_campaign=t_45363_&utm_term=a36c2fcf8d2e48a2a514d86766920764'
        })
        $('#default .df-inner .box .tm .right .open').on('click', function () {
            window.location.href = 'https://jx.tmall.com/?ali_trackid=2:mm_50570328_39070332_145428725:1588373906_215_47963041'
        })








        // 自定义页面  设置图标背景颜色
        $('.colors>div').on('click', function () {
            $(this).addClass('choosed').siblings().removeClass('choosed');
            $('.left>div').css('backgroundColor', $(this).css('backgroundColor'));
        });

        // 自定义页面 点击“确定”之后传递数据
        $('.right button').click(function () {
            $(this).css('outline', 'none');
            if ($('.web-address>input').val().trim() && $('.web-name>input').val().trim() && $('.web-desc>input').val().trim()) {
                let newObj = {};
                newObj.webName = $('.web-name>input').val().trim();
                newObj.webAddress = $('.web-address>input').val().trim();
                newObj.webMessage = $('.web-desc>input').val().trim();
                // console.log(newObj);
                webTags.unshift(newObj);
                console.log(webTags);
                $('.web-address>input').val('');
                $('.web-name>input').val('');
                $('.web-desc>input').val('');
            } else {
                alert('请填写完整~');
            }
        });

        // 自定义页面  字体大小的拉动效果+对网站标题的字体调整效果
        $('.little-btn').mousedown(function () {
            function move(e) {
                let btnLeft = e.clientX - $('.little-btn').parent('.bar').offset().left;
                if (btnLeft < 0) {
                    btnLeft = 0;
                } else if (btnLeft > 207) {
                    btnLeft = 207;
                }
                $('.little-btn').css('left', btnLeft);
                $('.little-btn').siblings().css('width', btnLeft);
                $('.tagTitle').css('font-size', btnLeft / 222 * 24 + 'px');
            }
            $(document).on("mousemove", move);
            $(document).mouseup(function () {
                $(document).off("mousemove", move);
            })
        });

    }



    let num = 5.211314;

    //比如parseInt函数就用到了return

    //把num 进行取整 ，结果我们用a 保留
    let a = parseInt(num);

})